import React,{useEffect} from 'react'
import { Wrapper } from './style'
import './style.css'
import { Tabs,Select} from 'antd';
import Banners from './Banners'
import CardMovie from './CardMovie'


export default function Home() {
    const { TabPane } = Tabs;
    const {Option} = Select;
    useEffect(()=>{
        window.scrollTo(0,0)
    })
    return (
        <Wrapper>
            <header>
                <span>
                    <img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/141f64a34fd54fc79d10d64c5e08bf38~tplv-k3u1fbpfcp-watermark.image?'/>
                </span>
                <span>
                    <Select
                        defaultValue="南昌"
                        bordered={false}
                    >
                        <Option value="jack">南昌</Option>
                        <Option value="lucy">深圳</Option>
                        <Option value="tom">上海</Option>
                    </Select>
                </span>
               
                <input className='search' type="dashed" maxLength="32" 
                 placeholder="找影视剧、影人、影院" autoComplete="off"/>
            </header>
            <div>
                <Tabs 
                    style={{"color":"whitesmoke","position":"relative",
                    "top":".2rem","fontSize":"0.8rem",}}
                    centered 
                   defaultActiveKey="1" 
                    tabBarGutter={40}
                >
                    <TabPane tab="推荐" key="1">
                        <Banners/>
                        <CardMovie/>
                    </TabPane>
                    <TabPane tab="人生大事" key="2" style={{"height":"100vh"}}>
                        <p style={{"color":"black"}}>人生大事</p>
                    </TabPane>
                    <TabPane tab="预告片" key="3" style={{"height":"100vh"}}>
                        <p style={{"color":"black"}}>预告片</p>
                    </TabPane>
                    <TabPane tab="热片解读" key="4" style={{"height":"100vh"}}>
                        <p style={{"color":"black"}}>热片解读</p>
                    </TabPane>
                </Tabs>
            </div>
        </Wrapper>
    )
}